<template>
    <div class="page">
		<w-navbar :container="true" :isFixed="false" :background="{ backgroundColor: 'rgba(255,255,255,0)' }">
		    <view slot="container"> </view>
		</w-navbar>
		<div class="welcome">
		    <div class="w u-m-b-10">欢迎进入</div>
		    <div class="big">绘都！</div>
		</div>
		
        <div class="reg-wrap">
            <div class="input-wrap">
                <u-input v-model="phone" class="u-m-b-60" type="number" :custom-style="customStyle" placeholder="请输入手机号" />

                <!-- <div class="u-flex flex-between u-m-b-60">
                    <u-input v-model="code" placeholder="请输入验证码" type="number" :custom-style="customStyle" />
                    <div v-if="show" @click="getVerificationCode" class="getCode">
                        获取验证码
                    </div>
                    <div v-else class="getCode">{{ count }}s</div>
                </div> -->

                <u-input class="u-m-b-60" v-model="password" type="password" :custom-style="customStyle" placeholder="请输入登录密码" />
                <u-input class="u-m-b-60" v-model="password_re" type="password" :custom-style="customStyle" placeholder="再次输入登录密码" />
                <u-input class="u-m-b-60" v-model="uuid" placeholder="请输入邀请码" type="text" :custom-style="customStyle" />
            </div>
        </div>
        <div class="submit">
            <div class="btn" @tap="reg">提交</div>
            <w-full></w-full>
        </div>
        <w-slider-verify :show="isShowSliderVerify" @sliderVerifySuccessHandle="sliderVerifySuccessHandle"></w-slider-verify>
        <div class="reading">
			<div @tap="toPage('/pages/agreement/index',{type:1})">注册表示同意 <text style="color: black;">《使用协议》</text></div>
			<div @tap="toPage('/pages/download/index')">点击下载APP</div>
		</div>
		
    </div>
</template>

<script>
const TIME_COUNT = 60;
export default {
    data() {
        return {
            customStyle: {
                borderBottom: "1rpx solid #A0A0A0",
                paddingLeft: "10rpx",
            },
            show: true,
            // btnMsg: "获取验证码",
            code: "",
            count: "",
            password: "",
            password_re: "",
            isShowSliderVerify: false,
            phone: "",
            uuid: "",
        };
    },
	onLoad(){
		this.uuid = this.$Route.query.invite;
	},
    methods: {
        async getVerificationCode() {
            this.code = "";
            if (this.phone == "") {
                this.$u.toast("请输入手机号");
                return;
            }
            if (!/^1[34578]\d{9}$/.test(this.phone)) {
                this.$u.toast("请输入正确的手机号码");
                return;
            }
            this.isShowSliderVerify = true;
        },
        async sliderVerifySuccessHandle(v) {
            this.isShowSliderVerify = false;
            let res = await this.$http("common.getCode", {
                phone: this.phone,
                type: 1,
            });

            if (res) {
                this.countDown();
            }
        },
        countDown() {
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000);
            }
        },
        reg() {
            if (!this.phone) {
                this.$u.toast("请输入正确的手机号码");
                return;
            }
            // if (!this.code) {
            //     this.$u.toast("请输入验证码");
            //     return;
            // }
            if (!this.password) {
                this.$u.toast("请输入登录密码");
                return;
            }
            if (!this.password_re) {
                this.$u.toast("请再次输入登录密码");
                return;
            }
            if (this.password_re != this.password) {
                this.$u.toast("两次密码输入不一致");
                return;
            }
            // if (!this.isRed) {
            //     this.$u.toast("请阅读并同意协议");
            //     return;
            // }
            this.$http("common.register", {
                phone: this.phone,
                code: this.code,
                password: this.password,
                password_re: this.password_re,
                uuid: this.uuid,
            }).then((res) => {
                this.$u.toast(res.msg);
                if (res.code == 1) {
					this.toPage('/pages/download/index')
					// this.$Router.replaceAll("/pages/login/index");
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.page {
    width: 100%;
    min-height: 100vh;
    background: #fff;
    padding: 30rpx;
    box-sizing: border-box;
	.welcome {
	    margin-bottom: 150rpx;
	    .w {
	        font-size: 38rpx;
	    }
	    .big {
	        font-size: 54rpx;
	        font-weight: 700;
	    }
	}
    .reg-wrap {
        .getCode {
            margin-left: 20rpx;
            border: 1rpx solid #000000;
            border-radius: 10rpx;
            height: 60rpx;
            width: 178rpx;
            text-align: center;
            line-height: 60rpx;
            font-size: 24rpx;
            margin-bottom: 10rpx;
        }
    }
    .submit {
        position: fixed;
        bottom: 15%;
        left: 0;
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        .btn {
            width: 100%;
            background: #4e60df;
            height: 90rpx;
            color: #fff;
            text-align: center;
            line-height: 90rpx;
            border-radius: 10rpx;
        }
    }

    .reading {
        position: fixed;
        bottom: 100rpx;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a0a0a0;
        font-size: 24rpx;
    }
	
	.reading_app {
	    position: fixed;
	    bottom: 60rpx;
	    left: 0;
	    width: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: #a0a0a0;
	    font-size: 24rpx;
	}
}
</style>